<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <ui:composition template="layout.xhtml">
        <ui:define name="title">
            <h2><a href="#" class="back" onclick="history.go(-1)"/>Editar Empresa</h2>
        </ui:define>

        <ui:define name="body">
            <h:form id="empresaForm" enctype="multipart/form-data">            
                <p:messages id="messages" closable="true" showDetail="false" autoUpdate="true"  />
                <p:panel id="dadosGeraisPanel" styleClass="container_24 clearfix" >
                    <h2>Empresa</h2>

                    <p:panel id="empresaPanel" style="background: none; border: none; margin-left: -13px; padding-right: 0px; margin-right: 0px">
                        <p:outputLabel value="CNPJ:" styleClass="grid_3" for="cnpjInputText">
                            <span class="ui-outputlabel-rfi required">*</span>
                        </p:outputLabel>
                        <p:inputMask id="cnpjInputText"
                                     value="#{managerPesquisarEmpresa.empresaEditar.cnpj}" 
                                     styleClass="grid_8"
                                     mask="99.999.999/9999-99"
                                     autocomplete="false" >
                            <p:ajax event="blur" update=":empresaForm:cnpjPanel"
                                    listener="#{managerPesquisarEmpresa.existeCliente()}" />
                        </p:inputMask>

                        <p:panel id="cnpjPanel" styleClass="grid_4 clearfix" 
                                 style="border: none; margin: -13px 0 0 -20px;">
                            <p:outputLabel id="cnpjCadastradoOutputLabel" value="CNPJ já cadastrado !" 
                                           rendered="#{managerPesquisarEmpresa.cnpjCadastrado}" 
                                           styleClass="grid_23" style="color: red;"/>
                        </p:panel>
                        <div class="clear"/>

                        <p:outputLabel value="Razão Social:" styleClass="grid_3" for="empresaInputText">
                            <span class="ui-outputlabel-rfi required">*</span>
                        </p:outputLabel>
                        <p:inputText styleClass="grid_20" id="empresaInputText" 
                                     value="#{managerPesquisarEmpresa.empresaEditar.nomeFantasia}"/>

                    </p:panel>
                    <br/>

                    <h2>Setores</h2>

                    <p:panel id="setorPanel" style="background: none; border: none; margin-left: -13px; padding-right: 0px; margin-right: 0px">
                        <p:outputLabel value="Nome:" styleClass="grid_3" for="nomeSetorInputText">
                            <span class="ui-outputlabel-rfi required">*</span>
                        </p:outputLabel>
                        <p:inputText id="nomeSetorInputText" styleClass="grid_20" 
                                     value="#{managerPesquisarEmpresa.setorEditar.nome}"/>
                        <div class="clear"/>

                        <div class="buttonAction">
                            <p:commandButton value="Adicionar" icon="ui-icon-circle-plus" process=":empresaForm:setorPanel"
                                             update=":empresaForm:setorPanel"
                                             actionListener="#{managerPesquisarEmpresa.adicionarSetor()}"
                                             styleClass="ui-priority-primary" />
                        </div><br/>

                        <p:dataTable id="setorTable" var="item" value="#{managerPesquisarEmpresa.empresaEditar.setores}" 
                                     styleClass="grid_24" emptyMessage="Nenhum registro" rowIndexVar="idsetor">  
                            <f:facet name="header">
                                Setores
                            </f:facet>

                            <p:column headerText="Ação" width="50" style="vertical-align: middle; text-align: center">
                                <p:commandButton title="Editar" update=":empresaForm:setorPanel" 
                                                 process=":empresaForm:setorPanel"
                                                 actionListener="#{managerPesquisarEmpresa.editarSetor(item)}"
                                                 icon="ui-icon-pencil"/>
                                <p:commandButton title="Remover" update=":empresaForm:setorPanel" 
                                                 process=":empresaForm:setorPanel"
                                                 actionListener="#{managerPesquisarEmpresa.removerSetor(item)}"
                                                 icon="ui-icon-trash"/>
                            </p:column>

                            <p:column headerText="Nome" style="vertical-align: middle; text-align: center">
                                <h:outputText value="#{item.nome}"/>
                            </p:column>
                        </p:dataTable>
                    </p:panel>

                    <br/>
                    <h2>Usuários</h2>

                    <p:panel id="usuarioPanel" style="background: none; border: none; margin-left: -13px; padding-right: 0px; margin-right: 0px">

                        <p:outputLabel value="Responsável legal:" for="protocoloSelectBooleanButton" 
                                       style="margin-left: -25px" styleClass="grid_4" />
                        <p:selectBooleanButton id="protocoloSelectBooleanButton" styleClass="grid_3 selectBooleanButton"
                                               value="#{managerPesquisarEmpresa.usuarioEditar.responsavelLegal}"
                                               onLabel="Sim" offLabel="Não" 
                                               onIcon="ui-icon-check" offIcon="ui-icon-close" />
                        <div class="clear"/>

                        <p:outputLabel value="Nome:" styleClass="grid_3" for="nomeInputText">
                            <span class="ui-outputlabel-rfi required">*</span>
                        </p:outputLabel>
                        <p:inputText id="nomeInputText" styleClass="grid_20" value="#{managerPesquisarEmpresa.usuarioEditar.nome}"/>
                        <div class="clear"/>

                        <p:outputLabel value="Telefone 1:" styleClass="grid_3" for="telefone1InputText"/>
                        <p:inputMask  id="telefone1InputText" styleClass="grid_8 omega" 
                                      mask="(99) 9999-9999" value="#{managerPesquisarEmpresa.usuarioEditar.telefone}"/>

                        <p:outputLabel value="Telefone 2:" styleClass="grid_5 alpha" for="telefone2InputText"/>
                        <p:inputMask  id="telefone2InputText" styleClass="grid_8"
                                      mask="(99) 9999-9999" value="#{managerPesquisarEmpresa.usuarioEditar.telefone2}"/>
                        <div class="clear"/>

                        <p:outputLabel value="Login:" styleClass="grid_3" for="loginInputText">
                            <span class="ui-outputlabel-rfi required">*</span>
                        </p:outputLabel>
                        <p:inputText id="loginInputText" styleClass="grid_6" 
                                     readonly="#{managerPesquisarEmpresa.usuarioEditar.id  ne null}"
                                     value="#{managerPesquisarEmpresa.usuarioEditar.login}" />

                        <p:outputLabel value="Email:" styleClass="grid_3 alpha" for="emailInputText">
                            <span class="ui-outputlabel-rfi required">*</span>
                        </p:outputLabel>
                        <p:inputText id="emailInputText" styleClass="grid_11" value="#{managerPesquisarEmpresa.usuarioEditar.email}"/>
                        <div class="clear"/>

                        <div class="buttonAction">
                            <p:commandButton value="Adicionar" icon="ui-icon-plusthick" process=":empresaForm:usuarioPanel"
                                             update=":empresaForm:usuarioPanel"
                                             actionListener="#{managerPesquisarEmpresa.adicionarUsuario()}"
                                             styleClass="ui-priority-primary" />
                        </div><br/>

                        <p:dataTable id="empresaTable" var="item" value="#{managerPesquisarEmpresa.usuariosEditar}" 
                                     styleClass="grid_24" emptyMessage="Nenhum registro" rowIndexVar="idempresa">  
                            <f:facet name="header">
                                Usuários
                            </f:facet>

                            <p:column headerText="Ação" width="50" style="vertical-align: middle; text-align: center">
                                <p:commandButton title="Editar" update=":empresaForm:usuarioPanel" 
                                                 process=":empresaForm:usuarioPanel"
                                                 actionListener="#{managerPesquisarEmpresa.editarUsuario(item)}"
                                                 icon="ui-icon-pencil"/>
                                <p:commandButton title="Remover" update=":empresaForm:usuarioPanel" 
                                                 process=":empresaForm:usuarioPanel"
                                                 actionListener="#{managerPesquisarEmpresa.removerUsuario(item)}"
                                                 icon="ui-icon-trash"/>
                            </p:column>

                            <p:column headerText="Nome" style="vertical-align: middle; text-align: center">
                                <h:outputText value="#{item.nome}"/>
                            </p:column>
                            <p:column headerText="E-mail" style="vertical-align: middle; text-align: center">
                                <h:outputText value="#{item.email}"/>
                            </p:column>
                            <p:column headerText="Contato(s)" style="vertical-align: middle; text-align: center">
                                <h:outputText value="#{item.telefone}"/><br/>
                                <h:outputText value="#{item.telefone2}"/>
                            </p:column>
                            <p:column headerText="Resposável legal" style="vertical-align: middle; text-align: center">
                                <h:outputText value="#{item.responsavelLegal ? 'Sim' : 'Não'}"/>
                            </p:column>

                        </p:dataTable>
                    </p:panel>

                    <br/>
                    <h2>Endereço</h2>

                    <p:panel id="enderecoPanel" style="background: none; border: none; margin-left: -13px; padding-right: 0px; margin-right: 0px">
                        <p:outputLabel value="CEP:" styleClass="grid_3" for="cepInputMask" >
                            <span class="ui-outputlabel-rfi required">*</span>
                        </p:outputLabel>
                        <p:inputMask id="cepInputMask" styleClass="grid_9" mask="99.999-999"
                                     value="#{managerPesquisarEmpresa.enderecoEditar.cep}"> 
                        </p:inputMask>

                        <p:outputLabel value="Número: " styleClass="grid_3 " for="numInputText" />
                        <p:inputText id="numInputText" styleClass="grid_8 "
                                     value="#{managerPesquisarEmpresa.enderecoEditar.numero}" />
                        <div class="clear"/>

                        <p:outputLabel value="Logradouro:" styleClass="grid_3 " for="patioInputText" />
                        <p:inputText id="patioInputText" styleClass="grid_9" 
                                     value="#{managerPesquisarEmpresa.enderecoEditar.logradouro}" />


                        <p:outputLabel value="Bairro: " styleClass="grid_3 " for="bairroInputText" />
                        <p:inputText id="bairroInputText" styleClass="grid_8" 
                                     value="#{managerPesquisarEmpresa.enderecoEditar.bairro}" />
                        <div class="clear"/>

                        <p:outputLabel value="Município: " styleClass="grid_3 " for="municipioInputText" />
                        <p:inputText id="municipioInputText" styleClass="grid_9"
                                     value="#{managerPesquisarEmpresa.enderecoEditar.municipio}" />

                        <p:outputLabel value="Estado: " styleClass="grid_3 " for="estadoInputText" />
                        <p:inputText id="estadoInputText" styleClass="grid_8"
                                     value="#{managerPesquisarEmpresa.enderecoEditar.uf}" />
                        <div class="clear"/>

                        <p:outputLabel value="Complemento: " styleClass="grid_3 " for="complementInputText" />
                        <p:inputText id="complementInputText" styleClass="grid_20" 
                                     value="#{managerPesquisarEmpresa.enderecoEditar.compl}" />

                    </p:panel>
                    <div class="clear"/><br/>
                    <div class="buttonAction">
                        <p:commandButton value="Atualizar" actionListener="#{managerPesquisarEmpresa.atualizar()}"
                                         icon="ui-icon-disk" styleClass="ui-priority-primary"
                                         update="@form" />
                        <p:button value="Cancelar" icon="ui-icon-circle-close"
                                  href="indexempresa.xhtml"/>
                    </div>

                </p:panel>
            </h:form>
            <script  type="text/javascript" src="media/js/autoNumeric.js"></script>
            <script language="JavaScript" type="text/javascript">
                function requiredSetor(rqd){
                    if(rqd){
                        $('#empresaForm\\:setorPanel .ui-outputlabel').each(function() {
                            var id = $(this).attr('for').replace(':', '\\:');
                            /* <![CDATA[ */
                            if ($(this).children('span').hasClass('required') && ($('#' + id).val() == '')) {
                                $(this).addClass('ui-state-error');
                                $('#' + id).addClass('ui-state-error');
                            }
                            /* ]]> */
                        });
                    }else{
                        $('#empresaForm\\:setorPanel').children().removeClass('ui-state-error');
                    }
                }
                function requiredUsuario(rqd){
                    if(rqd){
                        $('#empresaForm\\:usuarioPanel .ui-outputlabel').each(function() {
                            var id = $(this).attr('for').replace(':', '\\:');
                            /* <![CDATA[ */
                            if ($(this).children('span').hasClass('required') && ($('#' + id).val() == '')) {
                                $(this).addClass('ui-state-error');
                                $('#' + id).addClass('ui-state-error');
                            }
                            /* ]]> */
                        });
                    }else{
                        $('#empresaForm\\:usuarioPanel').children().removeClass('ui-state-error');
                    }
                }
                function requiredEmpresa(rqd){
                    if(rqd){
                        $('#empresaForm\\:empresaPanel .ui-outputlabel').each(function() {
                            var id = $(this).attr('for').replace(':', '\\:');
                            /* <![CDATA[ */
                            if ($(this).children('span').hasClass('required') && ($('#' + id).val() == '')) {
                                $(this).addClass('ui-state-error');
                                $('#' + id).addClass('ui-state-error');
                            }
                            /* ]]> */
                        });
                    }else{
                        $('#empresaForm\\:empresaPanel').children().removeClass('ui-state-error');
                    }
                }
                function requiredEndereco(rqd){
                    if(rqd){
                        $('#empresaForm\\:enderecoPanel .ui-outputlabel').each(function() {
                            var id = $(this).attr('for').replace(':', '\\:');
                            /* <![CDATA[ */
                            if ($(this).children('span').hasClass('required') && ($('#' + id).val() == '')) {
                                $(this).addClass('ui-state-error');
                                $('#' + id).addClass('ui-state-error');
                            }
                            /* ]]> */
                        });
                    }else{
                        $('#empresaForm\\:enderecoPanel').children().removeClass('ui-state-error');
                    }
                }
            </script>
        </ui:define>
    </ui:composition>
</html>